<template>
  <div class="mui-content ">
    <heade background='' title='论文详情' v-on:goBack="goBack($event)"></heade>
    <div class="infoTitle">
      <img src="@assets/img_user.jpg" alt="">
      <div class="name">
        <div class="user">论文名称：</div>
        <div class="time">作者：</div>
      </div>
      <div class="right"> <div class=" mui-text-right">查看</div> <div class=" mui-text-right">下载</div></div>
    </div>
    <div class="movieFoot mui-text-center">
      <div class="movieDetail icon-left"><span class="icon icon1"></span>5</div>
      <div class="movieDetail icon-left"><span class="icon icon2"></span>2</div>
      <div class="movieDetail icon-left"><span class="icon icon3"></span>6</div>
      <div class="movieDetail icon-right">大小：500m</div>
      <div class="movieDetail icon-right">
        收藏：
        <span class="icon icon4" v-if="isCollect"></span>
        <span class="icon icon5" v-if="!isCollect"></span>
      </div>
      <!--<div class=" mui-text-right">评分:</div>-->
      <!--<div class="star">-->
      <!--<i class="star-item" v-for="(itemClass,index) in itemClasses" :key='index' :class="itemClass" ></i>-->
    <!--</div>-->
    </div>

    <div class='nav'>
      <div  class='nav-item' :class="clas1" @click="lesson(0)">课程信息
        <i class='line'></i>
      </div>
      <!--<div  class='nav-item' :class="clas2" @click="lesson(1)">附件信息-->
        <!--<i class='line line-med'></i>-->
      <!--</div>-->
      <div  class='nav-item' :class="clas3" @click="lesson(2)">评价()
        <i class='line'></i>
      </div>
    </div>
    <div class="footer">
      <Lesson v-show="isShow1===1"></Lesson>
      <Rating v-show="isShow1===2"></Rating>
    </div>


  </div>

</template>
<script>
  import heade from '@components/common/head2.vue'
  import Star from '@components/common/Star'
  // import Append from '@components/ResourceDetail/Append.vue'
  import Lesson from '@components/ResourceDetail/Lesson.vue'
  import  Rating from '@components/ResourceDetail/Rating.vue'

  import axios from 'axios'
  import {zcServer} from "../common/js/zcServer";
  //星星的长度
  const  LENGTH=5
  //星星的状态
  const CLS_ON='on'
  const CLS_off='off'
  export default {
    components:{
      heade,
      Star,
      // Append,
      Lesson,
      Rating,

    },
    props:{
      commentNum:{
        type:  Number,
        default:0
      }
    },
    data(){
      return{

        isCollect:false,
        isShow1:1,
        clas1:'active',
        clas2:'',
        clas3:'',
      }

    },
    computed:{
      itemClasses(){
        let result=[]
        //全星
        let integer=this.score
        //遍历全星
        for(let i=0;i<integer;i++){
          result.push(CLS_ON)
        }
//补齐
        while(result.length<LENGTH){
          result.push(CLS_off)
        }
        return result
      }
    },
    created(){
      zcServer.Post({
        Paras:{
          Name:'Vue_CourseResource',
          Action:'Ext_ActivityPage_RS',
          Data:{
            id:3
          }
        },
        Callback:this.callback_doArea,
        Scope:this
      });

    },
    methods:{

      goBack(){
        this.$router.push('/Index')
      },
      lesson(index){
        if(index===0){
          this.clas1="active";
          this.clas2="";
          this.clas3="";
          this.isShow1=1;
        }else {
          this.clas1="";
          this.clas2="";
          this.clas3="active";
          this.isShow1=2;
        }

      },

    }


  }
</script>
<style scoped>

  .mui-content  .infoTitle{
    margin-top: 10px;
    width: 100%;
    background-color: white;
    padding: 3% 3%;
    font-size: 14px;
    display: flex;
  }
  .mui-content  .infoTitle *{
    margin-left: 10px;
  }
  .mui-content  img{
    width: 45px;
    height: 45px;
    background-size: 35px 35px;
    /*border-radius: 50%;*/

  }
  .mui-content  .infoTitle .name{
    width: 55%;
    color:#717171;
  }
  .mui-content  .infoTitle .name .user{
    font-size: 1rem;
  }
  .mui-content  .infoTitle .right{
    font-size: 14px;
    display: flex;

  }
  .mui-content  .infoTitle .right .mui-text-right{
    padding-top: 3px;
    color:rgba(93, 194, 240, 1);
  }

  .mui-content .movieFoot {
    width: 100%;
    height: 45px;
    line-height: 45px;
    display: flex;
    border-bottom: 1px solid gainsboro;
    background-color: white;
    color: #aeaeae;
  }
  .mui-content .movieFoot .icon-left{
    width: 15%;
    font-size: 0.75rem;
  }
  .mui-content .movieFoot .icon-right{
    width: 26%;
    font-size: 0.75rem;
  }

  .mui-content .movieFoot .icon1{
    background: url("../assets/img/dianji.png");
  }
  .mui-content .movieFoot .icon2{
    background: url("../assets/img/sc.png");
  }
  .mui-content .movieFoot .icon3{
    background: url("../assets/img/pj.png");
  }
  .mui-content .movieFoot .icon4{
    background: url("../assets/img/shouCang2.png");
  }
  .mui-content .movieFoot .icon5{
    background: url("../assets/img/shouCang.png");
  }
  .mui-content .movieFoot .icon{

    display: inline-block;
    width: 18px;
    height: 13px;
    background-size: 16px 13px ;
    background-repeat: no-repeat;
  }
  .mui-content .movieFoot .icon4{

    display: inline-block;
    width: 18px;
    height: 16px;
    background-size: 18px 16px ;
    background-repeat: no-repeat;
  }
.mui-content .mui-text-right{
  font-size: 0.75rem;
}
  .mui-content .mui-text-right  .icon-right{
    /*font-size: 100px;*/
  }

  .star{
    font-size: 0;
    padding-top: 5px;
  }
  .star .star-item{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 2px;
    background-repeat: no-repeat;
    background-size: 12px 12px;
  }
  .star .star-item:last-child{
    margin-right: 0;
  }
  /* 二种图片类型*/
  .star .on{
    background-image: url('../assets/img/star1.png');
  }

  .star .off{
    background-image: url('../assets/img/star2.png');
  }
  .collectWrapper .star3{

    display: inline-block;
    width: 14px;
    height: 13px;
    background-size: 14px 13px;
    background-image: url('../assets/img/wdsc.png');
  }
  .nav{
    margin-top: 5px;
    position: relative;
    display:flex;
    /*widows:100%;*/
    height:50px;
    line-height: 50px;
    border-bottom:1px solid #e4e4e4;
    background-color: white;
  }
  .nav-item{
    flex:1;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    color:#666666;
  }
  /* 选中的样式 */
  .nav .active{
    color:rgba(93, 194, 240, 1);
    border-bottom:1px solid rgba(93, 194, 240, 1);
  }
  .mui-content .detail{
    margin-top: 10px;
  }

</style>
